<template>
    <div class="charge-system">
        <div class="operation">
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="年度">
                    <el-date-picker
                        v-model="form.year"
                        value-format="yyyy"
                        type="year"
                        placeholder="选择年"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="上报单位">
                    <dx-cascader
                        :area_id.sync="form.areaId"
                        :area_name.sync="form.areaName"
                        :area_lvl.sync="form.areaLvl"
                        ref="cascader"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        size="small"
                        type="primary"
                        style="margin-left: 12px"
                        @click="submitHandle()"
                        >查询</el-button
                    >
                </el-form-item>
               
            </el-form>
            <div class="tableBox">
                <el-table
                    id="table1"
                    border
                    stripe
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width:100%"
                    class="tableTh28"
                    height="73vh"
                    ref="table"
                >
                    <el-table-column label="指标" prop="indexName" width="240" />
                    <el-table-column label="单位" prop="unit" width="100" />
                    <el-table-column v-for="(it, i) in title" :key="i" :prop="it.value" min-width="200">
                        <template slot-scope="scope" slot="header">
                            <el-tooltip class="item" effect="dark" :content="it.tip" placement="top">
                        <span>{{it.label + ' ('+ it.time + ')'}}</span>
                        </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI";

export default {
    name: 'Bill-tab1',
    data() {
        return {
            titleName: [],
            tableLoading: false,
            form: {
                id: "",
                year: this.moment().format("YYYY"),
            },
            tableData: [],
            idList: [],
            title: []
        };
    },
    created() {
        
    },
    methods: {
        init() {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            this.form.areaId = this.accountInfo.areaId;
            this.getList();
        },
        submitHandle() {
            this.getList();
        },
        exportExcel() {
            var xlsxParam = {
                raw: true
            }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
            let workbook = XLSX.utils.book_new();
            let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
            XLSX.utils.book_append_sheet(workbook, ws1, '滚投结构分区域');
            let wbout = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            if(!this.tableData.length) {
                this.$message(
                    {
                    type: "success",
                    message: "暂无内容可导",
                    }
                )
                return
            }
            this.loading = this.$loading({
                lock: true,
                text: "正在导出",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream;charset=utf-8"'
                    }),
                    '滚投结构分区域.xlsx'
                );
                this.loading.close();
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbOut);
            }
            return wbout;
        },
        getList() {
            var that = this, content, title = [];

           
            $budgetAPI.getConstructTotalPro({
                testYear: that.form.year,
                areaId: that.form.areaId     
            }, res=> {
                console.log(res);
                content = res.content;
                content.titles.map((it, i) => {
                    var obj = {
                        label: '上报' + (i + 1),
                        value: 'indexValue' + i,
                        tip: it.rexplain,
                        time: it.createTime.substr(0, 10)
                    }
                    title.push(obj);
                });
                that.title = title;
                debugger
                content.data.map((it) => {
                    it.detailList.map((item,i) => {
                    it['indexValue' + i] = item.indexValue;
                    })
                });
                that.tableData = content.data;
            })

        },
    }
};
</script>

<style lang="scss">
.charge-system {
    .daochu {
        .el-form-item__content {
            float: right;
            width: 100%;
        }
    }
}
</style>
